import React from 'react'
import { Button, Checkbox, Form, Input } from 'antd';
import { LoginApi } from '../../api/user';
import { useNavigate } from 'react-router-dom';
import '../../App.css'
function Index() {
  const nav = useNavigate()
  const onFinish = async (values) => {
    console.log('Success:', values);
    let res = await LoginApi(values)
    console.log(res)
    localStorage.setItem('token', res.token)
    localStorage.setItem('username', res.username)
    localStorage.setItem('userId', res.userId)
    nav('/')
  };
  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div style={{ width: "100vw", height: "100vh", }} className='ys'>
      <div style={{ fontSize: "25px", fontWeight: "800", marginLeft: "250px", marginBottom: "50px" }}>文章发布系统</div>
      <div style={{ marginTop: "200px", marginLeft: "300px" }}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="账号"
            name="account"
            rules={[{ required: true, message: 'Please input your account!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item name="remember" valuePropName="checked" label={null}>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit" style={{ marginRight: "15px" }}>
              登录
            </Button>
            <Button type="primary">
              取消
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Index
